<template>
  <div class="personalCenter">
    <el-card shadow="always" class="user">
      <div class="img" v-if="userInfo.avatar">
        <img :src="userInfo.avatar" />
      </div>
      <div class="img" v-else>
        <img src="@/assets/img/default/noPortrait.svg" />
      </div>
      <div class="auth">
        <el-tag type="success" v-if="authority.includes('Member')" effect="dark">超级用户</el-tag>
        <el-tag type="info" v-else effect="dark">普通用户</el-tag>
      </div>
      <div class="info">
        <i>账号:</i>
        <span>{{ userInfo.account ? userInfo.account : "账号" }}</span>
      </div>
      <div class="info">
        <i>昵称:</i>
        <span>{{ userInfo.name ? userInfo.name : "昵称" }}</span>
      </div>
      <div class="btn">
        <el-button type="info" round @click="showDialog">修改信息</el-button>
        <el-button type="primary" round @click="logout">退出登录</el-button>
      </div>
    </el-card>
  </div>

  <modificationDialog ref="dialogRef" :user-info="userInfo"></modificationDialog>
</template>

<script setup lang="ts">
import { CACHE_USERINFO } from "@/global/constants"
import { localCache } from "@/utils/cacheData"
import useRouterJump from "@/hooks/useRouterJump"
import modificationDialog from "./cpns/modification-dialog.vue"
import { computed, onMounted, ref, watch } from "vue"
import { getUserInfo } from "@/service/user/user"
import type { IUserInfo } from "./type"

const { routerJump } = useRouterJump()

let userInfo = ref<IUserInfo>({
  id: 0,
  account: "",
  name: "",
  address: null,
  authority: [
    {
      id: 1,
      name: "Common"
    }
  ],
  avatar: null,
  createTime: "",
  fans_counts: 0
})

/* 获取本人的身份 */
const authority = computed(() => {
  const auth: string[] = []

  userInfo.value.authority.forEach((element) => {
    auth.push(element.name)
  })

  console.log(auth)

  return auth
})

const dialogRef = ref()

function showDialog() {
  dialogRef.value!.dialogRef!.showDialog = true
}

/**
 * 请求用户信息
 */
function reqGetUserInfo() {
  getUserInfo().then((res) => {
    if (res.data.code == 200) {
      userInfo.value = res.data.data.userInfo
      localCache.setCache(CACHE_USERINFO, res.data.data.userInfo)
    }
  })
}

/**
 * 退出登录
 */
function logout() {
  localCache.clearCache()
  routerJump("push", "Home")
}

onMounted(() => {
  reqGetUserInfo()

  watch(
    () => dialogRef.value!.dialogRef!.showDialog,
    () => {
      reqGetUserInfo()
    }
  )
})
</script>

<style lang="less" scoped>
.personalCenter {
  width: 100%;
  padding: 20px 0;
  .user {
    width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    .img {
      display: flex;
      justify-content: center;
      img {
        width: 120px;
        border-radius: 50%;
      }
    }

    .auth {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

    .info {
      // width: 200px;
      margin-top: 14px;
      display: flex;
      justify-content: center;
      i {
        font-weight: 600;
        margin-right: 10px;
      }
    }

    .btn {
      margin-top: 20px;
    }
  }
}
</style>
